<template>
  <!--     :style="{ width: layerManagerShow ? '84.25%' : '97.5%' }" -->
  <div class="toolBar">
    <!-- 搜索容器 -->
    <div class="barContainer">
      <!-- 搜索显隐 -->
      <div
        class="funButton"
        @click="searchShow = !searchShow"
        :style="{ backgroundColor: searchShow ? '#3f69e4' : '#fff' }"
        id="showController"
      >
        <img
          :src="
            require('@/assets/images/icon/toolBar/' +
              (searchShow ? '框选查询-开启.png' : '框选查询.png') +
              '')
          "
        />
      </div>
      <!-- 搜索功能框 -->
      <div class="funContainer"><search /></div>
    </div>
    <!-- 清除容器 -->
    <div class="barContainer">
      <!-- 清除控件 -->
      <div class="funButton" @click="clearMap" :id="clearMapButtonStyle">
        <img
          :src="
            require('@/assets/images/icon/toolBar/清除标绘' +
              (clearMapButtonStyle === 'clearing' ? '-开启.png' : '.png') +
              '')
          "
        />
      </div>
    </div>
    <!-- 空间查询容器 -->
    <div class="barContainer">
      <!-- 空间查询显隐 -->
      <div
        class="funButton"
        @click="spatialQueryWakeUp"
        :style="{ backgroundColor: spatialQueryShow ? '#3f69e4' : '#fff' }"
        id="spatialQueryShow"
      >
        <img
          :src="
            require('@/assets/images/icon/toolBar/' +
              (spatialQueryShow ? '空间查询-开启.png' : '空间查询.png') +
              '')
          "
        />
      </div>
      <!-- 空间查询按钮 -->
      <div class="funContainer">
        <spatialQuery />
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { getCurrentInstance, onMounted } from "vue";
import pubsub from "pubsub-js";

import search from "@/components/Search/search.vue";
import spatialQuery from "@/components/SpatialQuery/spatialQuery.vue";

export default {
  name: "工具栏",
  components: {
    search,
    spatialQuery,
  },
  data() {
    return {
      searchShow: true,
      spatialQueryShow: false,
      clearMapButtonStyle: "unClear",
      subList: [],
      layerManagerShow: true,
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();

    onMounted(() => {
      subscribeList();
    });

    // 订阅列表
    function subscribeList() {
      proxy.subList.push(
        // 空间查询工具条显隐
        pubsub.subscribe("spatialQueryShowControll", (n, data) => {
          proxy.spatialQueryShow = data;
        }),
        // 图层管理控件显隐
        pubsub.subscribe("layerManagerShowChange", (n, data) => {
          proxy.layerManagerShow = data;
        })
      );
    }

    // 地图清空
    function clearMap() {
      // 样式展示
      proxy.clearMapButtonStyle = "clearing";
      setTimeout(() => {
        proxy.clearMapButtonStyle = "unClear";
      }, 500);
      // 传输清除信息
      pubsub.publish("deleteMarker", []);
      // 关闭信息列表
      pubsub.publish("queryInfoShow", {
        flag: false,
        resultList: [],
      });
    }

    // 空间查询唤起
    function spatialQueryWakeUp() {
      proxy.spatialQueryShow = !proxy.spatialQueryShow;
      pubsub.publish("dropDownShowControll", false);
    }

    return { clearMap, spatialQueryWakeUp };
  },
  watch: {
    searchShow(newValue, oldValue) {
      pubsub.publish("searchShowControll", newValue);
    },
    spatialQueryShow(newValue, oldValue) {
      pubsub.publish("spatialQueryShowControll", newValue);
    },
  },
  beforeDestroy() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
.toolBar {
  position: absolute;
  top: 1%;
  left: 0.5%;
  // height: 10%;
  // width: 10%;
  transition: width 0.3s ease;
}

.barContainer {
  display: flex;
  // flex-direction: row;
  position: relative;
  // width: 100%;
  // height: 100%;
  margin-bottom: 2%;
  > .funContainer {
    position: relative;
    left: 2%;
    background-color: white;
    height: 35px;
    z-index: 9999;
    border-radius: 5px;
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
  }
}

.funButton {
  position: relative;
  z-index: 9999;
  background-color: white;
  border-radius: 5px;
  width: 35px;
  height: 35px;
  border: #3f69e4 1px solid;
  // margin-bottom: 0.5%;
  // margin-right: 5%;
  bottom: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  > img {
    width: 25px;
  }
}
.funButton:hover {
  cursor: pointer;
}

#clearing {
  background-color: #3f69e4;
  > img {
    animation: swing 0.25s ease-in-out infinite alternate; /* 应用钟摆摇摆动画 */
  }
}

@keyframes swing {
  0% {
    /* 开始时角度为0度 */
    transform: rotateZ(0deg);
  }
  100% {
    /* 结束时角度为10度（可以根据需要调整摇摆幅度） */
    transform: rotateZ(-50deg);
  }
}
</style>